<template>
  <el-form ref="clueRefForm" :model="clueQuery" label-width="auto" style="max-width: 1000px" :rules="cluRules">
    <!--负责人-->
    <el-form-item label="负责人">
      <el-select
          v-model="clueQuery.ownerId"
          clearable
          placeholder=""
          disabled
      >
        <el-option
            v-for="item in ownerOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <!--所属市场活动-->
    <el-form-item label="所属活动" prop="activityId">
      <el-select
          v-model="clueQuery.activityId"
          placeholder="请选择所属活动"
          clearable
      >
        <el-option
            v-for="item in activityOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <!--姓名-->
    <el-form-item label="姓名" prop="fullName">
      <el-input v-model="clueQuery.fullName" />
    </el-form-item>

    <!--称呼-->
    <el-form-item label="称呼" prop="appellation">
      <el-select
          v-model="clueQuery.appellation"
          placeholder="请选择称呼"
          clearable
      >
        <el-option
            v-for="item in applicationOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <!--手机-->
    <el-form-item label="手机号" v-if="clueQuery.id>0">
      <el-input v-model="clueQuery.phone" disabled/>
    </el-form-item>

    <!--手机-->
    <el-form-item label="手机号" prop="phone" v-else>
      <el-input v-model="clueQuery.phone"/>
    </el-form-item>

    <!--微信-->
    <el-form-item label="微信">
      <el-input v-model="clueQuery.weixin" />
    </el-form-item>

    <!--QQ-->
    <el-form-item label="QQ" prop="qq">
      <el-input v-model="clueQuery.qq" />
    </el-form-item>

    <!--邮箱-->
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="clueQuery.email" />
    </el-form-item>

    <!--年龄-->
    <el-form-item label="年龄" prop="age">
      <el-input v-model="clueQuery.age" />
    </el-form-item>

    <!--职业-->
    <el-form-item label="职业">
      <el-input v-model="clueQuery.job" />
    </el-form-item>

    <!--住址-->
    <el-form-item label="住址">
      <el-input v-model="clueQuery.address" />
    </el-form-item>

    <!--年收入-->
    <el-form-item label="年收入" prop="yearIncome">
      <el-input v-model="clueQuery.yearIncome" />
    </el-form-item>

    <!--贷款-->
    <el-form-item label="贷款">
      <el-select
          v-model="clueQuery.needLoan"
          placeholder="请选择是否需要贷款"
          clearable
      >
        <el-option
            v-for="item in needLoadOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <!--意向状态-->
    <el-form-item label="意向状态">
      <el-select
          v-model="clueQuery.intentionState"
          placeholder="请选择意向状态"
          clearable
      >
        <el-option
            v-for="item in intentionStateOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <!--意向产品-->
    <el-form-item label="意向产品">
      <el-select
          v-model="clueQuery.intentionProduct"
          placeholder="请选择意向产品"
          clearable
      >
        <el-option
            v-for="item in productOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <!--线索状态-->
    <el-form-item label="线索状态">
      <el-select
          v-model="clueQuery.state"
          placeholder="请选择线索状态"
          clearable
      >
        <el-option
            v-for="item in clueStateOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <!--线索来源-->
    <el-form-item label="线索来源">
      <el-select
          v-model="clueQuery.source"
          placeholder="请选择线索来源"
          clearable
          @click="loadOwner"
      >
        <el-option
            v-for="item in sourceOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <!--线索描述-->
    <el-form-item label="线索描述" prop="description">
      <el-input
          v-model="clueQuery.description"
          style="width: 1000px"
          :rows="5"
          type="textarea"
          placeholder="请输入线索描述"
      />
    </el-form-item>

    <!--下次联系时间-->
    <el-form-item label="下次联系时间">
      <el-date-picker
          v-model="clueQuery.nextContactTime"
          type="datetime"
          placeholder="请选择下次联系时间"
          style="width: 1000px"
          value-format="YYYY-MM-DD HH:mm:ss"
      />
      <el-button type="primary" @click="clueSubmit">提 交</el-button>
      <el-button type="success" plain @click="back">返 回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {doGet, doPost, doPut} from "../http/httpRequest.js";
import {back, massageTip} from "../utils/util.js";

export default {
  name: "ClueRecordView",
  data(){
    return {
      clueQuery:{},
      activityQuery: {},

      // 负责人下拉选项
      ownerOptions: [{}],
      // 市场活动下拉选项
      activityOptions: [{}],
      // 称呼下拉选项
      applicationOptions: [{}],
      // 贷款下拉选项
      needLoadOptions: [{}],
      // 意向状态下拉选项
      intentionStateOptions: [{}],
      // 线索状态下拉选项
      clueStateOptions: [{}],
      // 线索来源
      sourceOptions: [{}],
      // 意向产品下拉列表
      productOptions: [{}],

      // 验证规则
      cluRules:{
        fullName:[
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5]+$/ ,message: '姓名必须是中文',trigger: 'blur' },
          ],
        phone :[
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ ,message: '手机号格式有误',trigger: 'blur' },
          // 验证手机号是否存在
          {validator: this.checkPhone, trigger: 'blur'}
        ],
        qq: [
          { min: 5, message: 'QQ号至少为5位', trigger: 'blur' },
          { pattern: /^\d+$/ ,message: 'QQ号必须是数字',trigger: 'blur' },
        ],
        email: [
          { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,message: '邮箱格式有误',trigger: 'blur' }
        ],
        age: [
          { pattern: /^\d+$/ ,message: '年龄必须位数字',trigger: 'blur' },
        ],
        yearIncome: [
          { pattern: /^[0-9]+(\.[0-9]{2})?$/ ,message: '年收入必须是整数或者两位小数',trigger: 'blur' },
        ],
        description: [
          { min: 5, max: 255, message: '线索描述至少5个文字', trigger: 'blur' },
        ]
      }
    }
  },

  mounted() {
    this.loadDicValue('activity')
    this.loadDicValue('intentionProduct')
    this.loadDicValue('appellation');
    this.loadDicValue('needLoan')
    this.loadDicValue('intentionState')
    this.loadDicValue('clueState')
    this.loadDicValue('source')

    // 加载当前登录用户
    this.loadLoginUser();
    // 加载活动负责人
    this.loadOwner();
    // 加载线索数据
    this.loadClue();

  },

  methods: {
    back,
    // 加载字典数据
    loadDicValue(typeCode){
      doGet('/api/dicValue/'+typeCode,{}).then(resp=>{
        if (resp.data.code===200) {
          if (typeCode==='appellation'){
            this.applicationOptions=resp.data.data
          }else if (typeCode==='needLoan'){
            this.needLoadOptions=resp.data.data
          }else if (typeCode==='intentionState'){
            this.intentionStateOptions=resp.data.data
          }else if (typeCode==='clueState'){
            this.clueStateOptions=resp.data.data
          }else if (typeCode==='source'){
            this.sourceOptions=resp.data.data
          }else if(typeCode==='activity'){
            this.activityOptions=resp.data.data
          }else if (typeCode==='intentionProduct'){
            this.productOptions=resp.data.data
          }
        }
      })
    },

    // 加载当前登录用户
    loadLoginUser(){
      doGet('/api/login/info',{}).then((resp)=>{
        let user=resp.data.data
        this.clueQuery.ownerId=user.id;
      })
    },

    // 加载负责人
    loadOwner(){
      doGet('/api/owner',{}).then((resp)=>{
        if (resp.data.code===200){
          this.ownerOptions=resp.data.data;
        }
      })
    },

    // 验证手机号是否录入
    checkPhone(rule,value,callback){
      let phone=value;
      if (phone){
        doGet('/api/clue/'+phone,{}).then(resp=>{
          if (resp.data.code===500){
            return callback(new Error('该手机号已经录入'));
          }else {
            return callback();
          }
        })
      }
    },

    // 提交
    clueSubmit(){
      this.$refs.clueRefForm.validate((isValid)=>{
        if (isValid){
          let formData = new FormData();
          for (let clue in this.clueQuery) {
            if (this.clueQuery[clue]){
              formData.append(clue,this.clueQuery[clue])
            }
          }
          if (this.clueQuery.id>0){
            // 编辑线索
            doPut('/api/clue',formData).then(resp=>{
              console.log(resp)
              if (resp.data.code===200){
                massageTip(' 编辑成功','success')
                this.$router.push('/dashBoard/clue')
              }else {
                massageTip('编辑失败','error')
              }
            })
          }else {
            // 新增线索
            doPost('/api/clue',formData).then(resp=>{
              if (resp.data.code===200){
                massageTip('录入成功','success')
                this.$router.push('/dashBoard/clue')
              }else {
                massageTip('录入失败','error')
              }
            })
          }

        }
      })
    },

    // 加载线索数据
    loadClue(){
      let id = this.$route.params.id;
      if (id){
        doGet('/api/clue/detail/'+id,{}).then(resp=>{
          if (resp.data.code===200){
            this.clueQuery=resp.data.data
          }
        })
      }

    }
  }
}
</script>

<style scoped>
.el-button {
  margin-top: 15px;
}
</style>